库用的多了, 自然想了解以下它的原理是怎样的, 这是react-router-dom源码系列的第一篇, 后续会分多个部分来分别研究其中常用的Browser, HashRouter, Link, NavLink, Route, Switch, Redirect等组件

一、更新

[2019-3-24]

Removed

  • 移除起源部分

[2019-4-21]

Fixed

  • 修复图片链接失效问题

Changed

  • 完善文章格式

二、准备工作

2.1 fork

进入gayhub, 找到react-router, 将其fork下来, 项目一级目录大概是这样的:

react-router一级目录

2.2 精简

cd到react-router/packages/目录下, 看到里面有四个对应的文件夹, 这个已经很熟悉了, 我们阅读的是react-router-dom, 所以只保留如下两个项目文件夹:

react-router二级packages目录

这里要注意, 源码中react-router和react-router-dom是分开的, 而我们项目中只引用了react-router-dom这一个包, 因为react-router的作者将两者合并为一个包, 方便开发者使用

2.3 观摩

react-router-dom和react-router的目录结构简直一毛一样, 先来看react-router, 找到react-router/modules/ 目录:

react-router的modules目录

可以看到一个个熟悉的身影, 这里也就是我们的对应的源码目录, 一切将从这里开始… 同样的, 进入到react-router-dom/modules目录:

react-router-dom的modules目录

同样也是很熟悉了.

三、大致体系

其实react-router-dom的结构并没有那么复杂, 大致就是下面的这么一个图:

react-router-dom体系结构

可以看到, 大名鼎鼎的react-router-dom的底层API都是依靠了history这个依赖包, history提供了createBrowserHistory和createHashHistory这两个API供开发者使用. 而react-router-dom的BrowserRouter和HistoryRouter其实只是对上述提到的两个API进行了一层封装.

四、付诸实践

源码地址: 点我

五、总结

这篇文章只是对整个流程做了一个概述, 后续的章节将会一一学习各个API.